<template>
  <div class="goodsList">
    <!-- 顶部面包屑导航 -->
    <el-breadcrumb class="bread" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 中心卡片视图 -->
    <div class="title">商品列表</div>
    <el-card>
      <el-form :inline="true" class="inlineForm">
        <el-form-item label="商品 ：">
          <el-input placeholder="商品名称" v-model="goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select
            v-model="classify"
            @change="change"
            clearable
            @clear="clearable"
          >
            <el-option value="所有"></el-option>
            <el-option value="水果"></el-option>
            <el-option value="家电"></el-option>
            <el-option value="家具"></el-option>
            <el-option value="玩具"></el-option>
            <el-option value="日常用品"></el-option>
            <el-option value="食物"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" round @click="queryGoods">查询</el-button>
        <el-button type="primary" round @click="reset" :disabled="disBtn"
          >重置</el-button
        >
      </el-form>
    </el-card>
    <div class="centerBtn">
      <el-button type="primary" size="small" @click="addGoods"
        >新增商品</el-button
      >
      <el-button type="primary" size="small" disabled>导出</el-button>
    </div>
    <el-card
      class="tableCard"
      :class="{ f1: tableCardShow, f2: tableCardHidden }"
      border
      stripe
    >
      <el-table stripe style="width: 100%" :data="goodsList">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['bdbt', index === 0 ? 'bdtop' : '', 'vcenter']"
              v-for="(item, index) in scope.row.childrens"
              :key="index"
            >
              <el-col :span="4">
                <el-tag type="primary">{{ item.childrensName }}</el-tag>
              </el-col>
              <el-col :span="20">
                <el-row
                  :class="[index1 === 0 ? '' : 'bdtop', 'vcenter']"
                  class="row"
                  v-for="(item1, index1) in item.childrens"
                  :key="index1"
                >
                  <el-col :span="6">
                    <el-tag type="danger">{{
                      item1.childrensName
                    }}</el-tag></el-col
                  >
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      class="tag"
                      v-for="(item2, index2) in item1.childrens"
                      :key="index2"
                      >{{ item2.childrensName }}</el-tag
                    ></el-col
                  >
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="商品编号" prop="ID"> </el-table-column>
        <el-table-column label="商品图" prop="img">
          <template slot-scope="scope">
            <img :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="title"> </el-table-column>
        <el-table-column label="商品类型" prop="classify"> </el-table-column>
        <el-table-column label="成本价" prop="price"> </el-table-column>
        <el-table-column label="原价" prop="price1"> </el-table-column>
        <el-table-column label="销售价" prop="price2"> </el-table-column>
        <el-table-column label="库存量" prop="repertory"> </el-table-column>
        <el-table-column label="月销量" prop="monthSales"> </el-table-column>
        <el-table-column label="总销量" prop="sales"> </el-table-column>
        <el-table-column label="月销售额" prop="monthSales1"> </el-table-column>
        <el-table-column label="总销售额" prop="sales1"> </el-table-column>
        <el-table-column label="参与活动">
          <template slot-scope="scope">
            <span
              v-if="scope.row.isHuoDong === 0 || scope.row.isHuoDong === '0'"
              >打折销售</span
            >
            <span
              v-else-if="
                scope.row.isHuoDong === 1 || scope.row.isHuoDong === '1'
              "
              >没有优惠</span
            >
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.slod === 0 || scope.row.slod === '0'"
              >上架</span
            >
            <span v-else-if="scope.row.slod === 1 || scope.row.slod === '1'"
              >下架</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button type="info" @click="abc(scope.row)">查看 </el-button>
            <el-button
              type="danger"
              v-if="scope.row.slod === 0 || scope.row.slod === '0'"
              @click="upDownBtn(scope.row)"
              >下架</el-button
            >
            <el-button
              type="primary"
              v-else-if="scope.row.slod === 1 || scope.row.slod === '1'"
              @click="upDownBtn(scope.row)"
              >上架</el-button
            >
            <el-button type="success" @click="editGoods(scope.row)"
              >编辑</el-button
            >
            <el-button type="warning" @click="deleteGoods(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="查看商品详细" :visible.sync="treeShow" width="50%">
        <el-tree
          default-expand-all
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
        <br />
        <el-button type="primary" @click="treeShow = false">确 定</el-button>
      </el-dialog>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-card
      class="fromCard"
      :class="{ fromCardFadeIn: fromCardShow, fromCardFadeOut: fromCardHidden }"
      closeable
    >
      <span slot="header">新增商品</span>
      <el-button
        slot="header"
        type="text"
        style="float: right; padding: 3px 0"
        border="false"
        @click="closeCard"
        >X</el-button
      >
      <el-form
        ref="addGoodsformRef"
        :rules="addGoodsRules"
        :model="addGoodsform"
        label-width="130px"
      >
        <el-form-item label="商品ID" prop="ID">
          <el-input
            type="number"
            v-model="addGoodsform.ID"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="addGoodsform.title" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="商品类别" prop="classify">
          <template>
            <el-select
              v-model="addGoodsform.classify"
              clearable
              @clear="clearable"
            >
              <el-option value="水果"></el-option>
              <el-option value="家电"></el-option>
              <el-option value="家具"></el-option>
              <el-option value="玩具"></el-option>
              <el-option value="日常用品"></el-option>
              <el-option value="食物"></el-option>
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="成本价" prop="price">
          <el-input v-model="addGoodsform.price" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="原价" prop="price1">
          <el-input
            v-model="addGoodsform.price1"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="price2">
          <el-input
            v-model="addGoodsform.price2"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="sales1">
          <el-input
            v-model="addGoodsform.sales1"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否可用优惠卷" prop="slod">
          <template>
            <el-radio v-model="addGoodsform.slod" :label="0">是</el-radio>
            <el-radio v-model="addGoodsform.slod" :label="1">否</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="是否推荐" prop="isTuiJian">
          <template>
            <el-radio v-model="addGoodsform.isTuiJian" :label="0">是</el-radio>
            <el-radio v-model="addGoodsform.isTuiJian" :label="1">否</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="是否参加活动" prop="isHuoDong">
          <template>
            <el-radio v-model="addGoodsform.isHuoDong" :label="0">是</el-radio>
            <el-radio v-model="addGoodsform.isHuoDong" :label="1">否</el-radio>
          </template>
        </el-form-item>
        <div style="float:right">
          <el-button type="primary" @click="updataGoodsInfo">提交</el-button>
          <el-button type="danger" @click="closeCard">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage'
export default {
  name: 'goodsList',
  data() {
    return {
      goodsList: [],

      total: 400,
      pageSize: 10,
      pageNum: 1,
      classify: '所有',
      goodsName: '',
      disBtn: true,
      defaultProps: {
        children: 'childrens',
        label: 'childrensName'
      },
      treeShow: false,
      treeData: null,
      fromCardShow: false,
      tableCardShow: false,
      tableCardHidden: false,
      fromCardHidden: false,
      addGoodsform: {
        ID: '',
        title: '',
        classify: '',
        price: '',
        price1: '',
        price2: '',
        sales1: '',
        slod: null,
        isTuiJian: null,
        isHuoDong: null
      },
      addGoodsRules: {
        ID: [{ required: true, message: '请输入商品id', trigger: 'blur' }],
        title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        price: [{ required: true, message: '请输入成本价', trigger: 'blur' }],
        price1: [{ required: true, message: '请输入原价', trigger: 'blur' }],
        price2: [{ required: true, message: '请输入销售价', trigger: 'blur' }],
        sales1: [{ required: true, message: '请输入库存', trigger: 'blur' }],
        slod: [
          { required: true, message: '请选择是否可用优惠卷', trigger: 'blur' }
        ],
        isTuiJian: [
          { required: true, message: '请选择是否推荐', trigger: 'blur' }
        ],
        isHuoDong: [
          { required: true, message: '请选择是否参加活动', trigger: 'blur' }
        ]
      },
      index: '',
      isEdit: false
    }
  },
  methods: {
    async getGoodsList() {
      const { data } = await this.$http.get('user/list')
      this.goodsList = data.data
      this.total = data.total
      setItem('cjw', data.data)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getGoodsList()
    },
    queryGoods() {
      const data = this.goodsList.filter(item => {
        return item.title.includes(this.goodsName.trim())
      })
      if (data.length === 0) {
        return this.$message.error('查无此物')
      }
      if (data) {
        this.goodsList = data
      }
      this.disBtn = false
    },
    reset() {
      this.goodsList = getItem('cjw')
      this.goodsName = ''
      this.classify = '所有'
      this.disBtn = true
    },
    change(val) {
      const data = getItem('cjw').filter(item => {
        return item.classify.includes(val)
      })
      this.goodsList = data
      this.disBtn = false
      if (val === '所有') {
        this.getGoodsList()
        return false
      }
      if (data.length === 0) {
        this.$message.error('此分类没有数据,已自动返回')
        this.classify = '所有'
        this.getGoodsList()
      }
    },
    clearable() {
      this.classify = '所有'
      console.log(1)
    },
    handleNodeClick(data) {
      console.log(data)
    },
    abc(val) {
      this.treeData = val.childrens
      this.treeShow = true
    },
    upDownBtn(slod) {
      if (slod.slod === 1) {
        slod.slod = 0
      } else {
        slod.slod = 1
      }
      setItem('cjw', this.goodsList)
    },
    addGoods() {
      this.goodsList = getItem('cjw')
      this.fromCardHidden = false
      this.tableCardHidden = false
      this.fromCardShow = true
      this.tableCardShow = true
    },
    closeCard() {
      this.fromCardShow = false
      this.tableCardShow = false
      this.fromCardHidden = true
      this.tableCardHidden = true
      this.addGoodsform = {}
    },
    async deleteGoods(row) {
      const i = this.goodsList.findIndex(item => {
        return item.ID === row.ID
      })
      this.goodsList.splice(i, 1)
      await this.addOneGoods()
      setItem('cjw', this.goodsList)
    },
    async addOneGoods() {
      if (this.classify !== '所有') {
        return false
      } else {
        const { data } = await this.$http.get('addOne')
        this.goodsList.push(data.data)
      }
    },
    updataGoodsInfo() {
      if (this.isEdit) {
        this.goodsList[this.index] = this.addGoodsform
        setItem('cjw', this.goodsList)
        this.goodsList = getItem('cjw')
        this.closeCard()
        this.isEdit = false
      } else {
        this.$refs.addGoodsformRef.validate(vali => {
          if (!vali) return false
          this.goodsList.unshift(this.addGoodsform)
          setItem('cjw', this.goodsList)
          this.closeCard()
        })
      }
    },
    editGoods(row) {
      this.addGoodsform = row
      const index = this.goodsList.findIndex(item => {
        return item === this.addGoodsform
      })

      this.index = index
      this.isEdit = true
      this.addGoods()
    }
  },
  watch: {
    goodsList() {
      if (
        this.goodsList.length < 10 &&
        this.classify === '所有' &&
        this.btn === true
      ) {
        this.addOneGoods()
      }
    }
  },
  created() {
    if (!getItem('cjw')) {
      this.getGoodsList()
    } else {
      this.goodsList = getItem('cjw')
    }
  }
}
</script>

<style scoped lang="less">
.goodsList {
  position: relative;
  overflow: hidden;
  .bread {
    margin-bottom: 20px;
  }
  /deep/.inlineForm {
    height: 40px;
    .el-form-item {
      padding-right: 70px;
      .el-select {
        padding-right: 20px;
      }
    }
    .el-button {
      margin-right: 20px;
    }
  }
  .title {
    margin-bottom: 5px;
  }
  .centerBtn {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    .el-button {
      height: 30px;
    }
  }
  .vcenter {
    display: flex;
    align-items: center;
  }
  .bdtop {
    border-top: 1px solid #eeeeee;
  }
  .bdbt {
    border-bottom: 1px solid #eeeeee;
  }
  .el-table {
    margin-top: 15px;
    font-size: 12px;
    margin-bottom: 15px;
    z-index: 2;
    height: 790px;
    overflow-y: inherit;
    &::before {
      height: 0 !important;
    }
  }
  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }
  .bdtop {
    border-top: 1px solid #eeeeee;
  }
  .bdbt {
    border-bottom: 1px solid #eeeeee;
  }
  .el-tag {
    margin: 7px;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      right: -81%; /*初始状态 透明度为0*/
      z-index: 3;
    }
    25% {
      opacity: 0.25;
      right: -55%; /*中间状态 透明度为0*/
      z-index: 3;
    }
    50% {
      opacity: 0.5;
      right: -30%; /*中间状态 透明度为0*/
      z-index: 3;
    }
    75% {
      opacity: 0.75;
      right: -5%; /*中间状态 透明度为0*/
      z-index: 3;
    }
    100% {
      opacity: 1;
      right: 20%; /*结尾状态 透明度为1*/
      z-index: 3;
    }
  }
  @keyframes fadeOut {
    0% {
      opacity: 1;
      right: 20%; /*结尾状态 透明度为1*/
    }
    25% {
      opacity: 0.75;
      right: -5%; /*中间状态 透明度为0*/
    }
    50% {
      opacity: 0.5;
      right: -30%; /*中间状态 透明度为0*/
    }
    75% {
      opacity: 0.25;
      right: -55%; /*中间状态 透明度为0*/
    }
    100% {
      opacity: 0;
      right: -81%; /*初始状态 透明度为0*/
    }
  }
  /deep/.fromCard {
    width: 60%;
    height: 65%;
    overflow-y: initial;
    position: absolute;
    right: -81%;
    top: 18%;
    border: 0;
    .el-form-item {
      margin-bottom: 10px;
    }
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
  }
  .fromCardFadeIn {
    animation: fadeIn 1s linear forwards;
  }
  .fromCardFadeOut {
    animation: fadeOut 1s linear forwards;
  }
  @keyframes f1 {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0.75;
    }
    50% {
      opacity: 0.5;
    }
    75% {
      opacity: 0.25;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes f2 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.5;
    }
    75% {
      opacity: 0.75;
    }
    100% {
      opacity: 1;
    }
  }
  .f1 {
    animation: f1 1s linear forwards;
  }
  .f2 {
    animation: f2 1s linear forwards;
  }
}
</style>
